<%-- 商品搜索列表页面 --%>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/view/include/taglibs.jspf" %>
<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <link rel="stylesheet" href="/css/base.css"/>
    <link rel="stylesheet" href="/css/elements.css">
    <link rel="stylesheet" href="/css/shop.css"/>
    <link rel="stylesheet" href="/css/attrs.css"/>
    <link rel="stylesheet" href="/css/crumb.css"/>
    <link rel="stylesheet" href="${ctx}/css/elevator.css"/>
    <style type="text/css">
        .nrt {
            /*background: #fff8f6 url(http://img01.taobaocdn.com/tps/i1/T1LfjsXednXXb6ek6l-66-58.jpg) no-repeat 35px center;*/
            background-color: #f7eae7;
            border: 1px solid #f7eae7;
            color: #595959;
            margin-bottom: 10px;
            padding: 20px 0 20px 123px;
            line-height: 27px;
            font-size: 14px;
        }
        .path {
            background: url(http://www.tqmall.com/Public/images/common_ico.png?t=20140922) no-repeat scroll 0 -418px rgba(0,0,0,0);
            margin: 15px 0;
            padding: 0 0 0 25px;
        }
    </style>
</head>
<body class="small">
<!-- S 通用顶部 -->
<%@ include file="../../include/site-nav.jspf" %>
<!-- E 通用顶部 -->
<!-- S 头部 -->
<%@ include file="/include/header.jspf" %>
<!-- E 头部 -->
<!-- S 主导航 -->
<%@ include file="/include/main-nav.jspf" %>
<!-- E 主导航 -->
<div class="w1190 not-index small">
    <%@include file="/include/cat-nav.jspf"%>
</div>
<div class="w1190 cf">
    <div class="path">您当前的位置： <a href="###">所有结果</a> &gt; <a href="###">奔腾</a></div>
    <div class="fl" style="height: 100%;">
        <%@include file="/cat2.jsp" %>
        <div class="cat-menu">
            <div class="menu expand">
                <h3 class="menu-tit" data-id="0826FE9A66C32DEEE050A8B4AF291673">热卖推荐</h3>
                <ul>
                    <li><a href="?cat=0826FE9A66C62DEEE050A8B4AF291673" title="0826FE9A66C62DEEE050A8B4AF291673">汽机油</a></li>
                </ul>
            </div>
        </div>
        <style type="text/css">
            .layout_search_sidebar {
                float: left;
                width: 205px;
                color: #333;
                font-family: Arial;
            }
            .mb {
                margin-bottom: 10px;
            }
            .search_title {
                height: 38px;
                padding: 0 10px 0 25px;
                border: 1px solid #E9E9E9;
                background: #FAFAFA;
                font-size: 14px;
                line-height: 38px;
                font-weight: normal;
                font-family: "microsoft yahei";
            }
            .mod_search_sidlist .sidlist_box {
                padding: 10px 20px;
                border: 1px solid #EAEAEA;
                border-top: none;
            }
            .mod_search_sidlist .sidlist_box li {
                padding: 10px 0;
            }
            .mod_search_sidlist .pro_img, .mod_search_sidlist .pro_img_big, .mod_search_sidlist .pro_img_small, .mod_hot_offers .pro_img_big {
                display: block;
                position: relative;
                z-index: 10;
                width: 115px;
                height: 115px;
                margin: 0 auto;
            }
            .mod_search_sidlist .pro_img_big, .mod_hot_offers .pro_img_big {
                width: 160px;
                height: 160px;
            }
            .mod_search_sidlist .sidlist_box .tip, .mod_hot_offers .tip {
                display: block;
                height: 14px;
                line-height: 14px;
                margin: 5px 0 2px;
                color: #e60012;
            }
            .price {
                padding: 5px 0;
                float: left;
                font-size: 18px;
                font-weight: bold;
                font-family: "Century Gothic";
            }
            .mod_search_sidlist .price, .similar_products_con .price, .mod_hot_offers .price {
                font-size: 14px;
                float: none;
            }
            .mod_search_sidlist .name {
                height: 36px;
                overflow: hidden;
                line-height: 18px;
                word-break: break-all;
            }
            .comment {
                height: 18px;
                padding-bottom: 8px;
                line-height: 18px;
            }
            .mod_search_sidlist .comment {
                padding-bottom: 0;
            }
            .sidlist_box .free, .mod_search_list .title .free, .mod_hot_offers .free {
                color: #ec9299;
            }
            a:hover, .color_red {
                color: #e60012;
            }
            .layout_search_sidebar .price span {
                font-size: 14px;
            }
        </style>
        <div class="layout_search_sidebar">
        <div id="hotProducts" class="mod_search_sidlist mb clearfix" data-tpa="SEARCH_LEFT_HOT_PRODUCTS">
            <h2 class="search_title">热卖推荐</h2>
            <div class="sidlist_box">
                <ul>
                    <li id="ad_35683095" inshop="1">
                        <a target="_blank" onclick="addTrackPositionToCookie('1','yhd_p4p_ydt1')" href="http://tracker.yhd.com/ad-dolphin-go/go?v=oWAqgL_iQf19cW3csUdH9IJC5W06l94MNjeHsfpHWc2yf4ztLhOC-hh6IH8dV4F3_3klgmGid49Mcq24O7aKjt9Z8gWzyOBM8dCxyT2_uE6p6BQY0Fd4i0bJpdlg7GY3Dq795pku1PF01RDCoXVPFePmG8e0mWg-RWmwnoKvn3C-In018vry6yMqbbXCw3HUxWKOK0dCCU0NRgUtdNhv-JR3HqaqO4NJx-u9LD0qzzHldHX-xoZ71WzZ2IH0BJZCAuggEuGE9cAvTo32jl15KoEPc67qG69jmqhfCb2sUYo." class="pro_img_big">
                            <img src="http://d7.yihaodianimg.com/N07/M0A/D5/E3/CgQI0FQ-OnqAbMkoAAKjWBOIosk91200_160x160.jpg" title="超薄聚合物移动电源 充电宝13000毫安" width="160" height="160">
                        </a>
                        <a class="tip" id="promotionLeft_35683095" target="_blank" onclick="addTrackPositionToCookie('1','hotSaleLeftPromoInfo_30403904');" title="" href=""></a>
                        <p class="price">
                            <span class="color_red">¥88.0</span>
                            <del></del>
                        </p>
                        <p class="name">
                            <a target="_blank" onclick="addTrackPositionToCookie('1','yhd_p4p_ydt1')" href="http://tracker.yhd.com/ad-dolphin-go/go?v=oWAqgL_iQf19cW3csUdH9IJC5W06l94MNjeHsfpHWc2yf4ztLhOC-hh6IH8dV4F3_3klgmGid49Mcq24O7aKjt9Z8gWzyOBM8dCxyT2_uE6p6BQY0Fd4i0bJpdlg7GY3Dq795pku1PF01RDCoXVPFePmG8e0mWg-RWmwnoKvn3C-In018vry6yMqbbXCw3HUxWKOK0dCCU0NRgUtdNhv-JR3HqaqO4NJx-u9LD0qzzHldHX-xoZ71WzZ2IH0BJZCAuggEuGE9cAvTo32jl15KoEPc67qG69jmqhfCb2sUYo." title="超薄聚合物移动电源 充电宝13000毫安">
                                <span id="hottag_30403904" class=" free">[包邮]</span>超薄聚合物移动电源 充电宝13000毫安
                            </a>
                        </p>
                        <p class="comment" id="comment_30403904">
                            <i></i>
                            <a id="cmt_30403904" cmct="209" onclick="addTrackPositionToCookie('1','yhd_p4p_ydt1')" target="_blank" href="http://tracker.yhd.com/ad-dolphin-go/go?v=oWAqgL_iQf19cW3csUdH9IJC5W06l94MNjeHsfpHWc2yf4ztLhOC-hh6IH8dV4F3_3klgmGid49Mcq24O7aKjt9Z8gWzyOBM8dCxyT2_uE6p6BQY0Fd4i0bJpdlg7GY3Dq795pku1PF01RDCoXVPFePmG8e0mWg-RWmwnoKvn3C-In018vry6yMqbbXCw3HUxWKOK0dCCU0NRgUtdNhv-JR3HqaqO4NJx-u9LD0qzzHldHX-xoZ71WzZ2IH0BJZCAuggEuGE9cAvTo32jl15KoEPc67qG69jmqhfCb2sUYo.">209</a>
                        </p></li><li id="ad_36603796" inshop="1"><a target="_blank" onclick="addTrackPositionToCookie('1','yhd_p4p_ydt1')" href="http://tracker.yhd.com/ad-dolphin-go/go?v=oWAqgL_iQf19cW3csUdH9IJC5W06l94MNjeHsfpHWc2yf4ztLhOC-hh6IH8dV4F3_3klgmGid49Mcq24O7aKjt9Z8gWzyOBM8dCxyT2_uE6p6BQY0Fd4i0bJpdlg7GY3Dq795pku1PF01RDCoXVPFePmG8e0mWg-RWmwnoKvn3AshdH9_ZF2XmU30GYkCbCwlxOt1X3RwkwxCWpkCbJcBQh-Kyy6DOlXATX_lxAtTHixlu8vcHgnLgfnloMvMhpWXuDxWW_6acLnXatL91uCK4EPc67qG69jmqhfCb2sUYo." class="pro_img_big"><img src="http://d9.yihaodianimg.com/V00/M03/31/1C/CgQDsFSJVZ6AERutAAPc-eso60869300_160x160.jpg" title="苹果iPhone6手机壳透明保护套" width="160" height="160"></a><a class="tip" id="promotionLeft_36603796" target="_blank" onclick="addTrackPositionToCookie('1','hotSaleLeftPromoInfo_31216326');" title="" href=""></a><p class="price"><span class="color_red">¥48.0</span><del></del></p><p class="name"><a target="_blank" onclick="addTrackPositionToCookie('1','yhd_p4p_ydt1')" href="http://tracker.yhd.com/ad-dolphin-go/go?v=oWAqgL_iQf19cW3csUdH9IJC5W06l94MNjeHsfpHWc2yf4ztLhOC-hh6IH8dV4F3_3klgmGid49Mcq24O7aKjt9Z8gWzyOBM8dCxyT2_uE6p6BQY0Fd4i0bJpdlg7GY3Dq795pku1PF01RDCoXVPFePmG8e0mWg-RWmwnoKvn3AshdH9_ZF2XmU30GYkCbCwlxOt1X3RwkwxCWpkCbJcBQh-Kyy6DOlXATX_lxAtTHixlu8vcHgnLgfnloMvMhpWXuDxWW_6acLnXatL91uCK4EPc67qG69jmqhfCb2sUYo." title="苹果iPhone6手机壳透明保护套"><span id="hottag_31216326" class=" free">[包邮]</span>苹果iPhone6手机壳透明保护套 </a></p><p class="comment" id="comment_31216326"> <i></i> <a id="cmt_31216326" cmct="79" onclick="addTrackPositionToCookie('1','yhd_p4p_ydt1')" target="_blank" href="http://tracker.yhd.com/ad-dolphin-go/go?v=oWAqgL_iQf19cW3csUdH9IJC5W06l94MNjeHsfpHWc2yf4ztLhOC-hh6IH8dV4F3_3klgmGid49Mcq24O7aKjt9Z8gWzyOBM8dCxyT2_uE6p6BQY0Fd4i0bJpdlg7GY3Dq795pku1PF01RDCoXVPFePmG8e0mWg-RWmwnoKvn3AshdH9_ZF2XmU30GYkCbCwlxOt1X3RwkwxCWpkCbJcBQh-Kyy6DOlXATX_lxAtTHixlu8vcHgnLgfnloMvMhpWXuDxWW_6acLnXatL91uCK4EPc67qG69jmqhfCb2sUYo.">79</a></p>
                </li>
                </ul>
            </div>
        </div>
        <p>热卖推荐</p>
        <p>搜过xxx的还看过</p>
        <p>一周销量排行榜</p>
        <p>热门店铺</p>
        <p>推广商品</p>
        <p>最近浏览</p>
        </div>
    </div>
    <%--<div class="w990 mall fr">--%>
    <div class="w960 mall fr">
        <!-- S bread crumb -->
        <div class="crumb">
            <div class="crumb-inner">
                <div class="crumbSlide " id="J_CrumbSlide">
                    <div class="crumbClip">
                        <ul class="crumbSlide-con cf">
                            <li><a class="crumbStrong" href="${ctx}/search">全部</a></li>
                            <%-- 存在分类 --%>
                            <%--<c:if test="${not empty param.cat and not empty facetGroup.cat}">--%>
                            <%-- 只有一个分类时显示 --%>
                            <c:if test="${cat != null}">
                                <li><i class="crumbArrow">&gt;</i></li>
                                <li class="crumbStrong">
                                    <a href="?cat=${cat.key}">${cat.name}</a>
                                </li>
                            </c:if>
                            <%-- 存在品牌 --%>
                            <c:set var="brand" value="${groupedProps.brand}" />
                            <c:if test="${param.brand != null and brand != null}">
                                <li><i class="crumbArrow">&gt;</i></li>
                                <li class="crumbAttr">
                                    <c:set var="url" value="${fnx:rp(paramValues, 'brand')}"/>
                                    <a href="${url}">${brand.values[0].name}</a>
                                    <a class="crumbDelete" href="${url}"></a>
                                </li>
                            </c:if>
                            <%-- 所有属性 --%>
                            <c:forEach var="path" varStatus="st" items="${ppaths}">
                                <li><i class="crumbArrow">&gt;</i></li>
                                <li class="crumbAttr" data-tag="brand" title="${path.name}">
                                    <c:set var="url" value="${fnx:rpv(paramValues, 'prop', path.path)}"/>
                                    <a href="${url}">${path.name}</a>
                                    <a class="crumbDelete" href="${url}"></a>
                                </li>
                            </c:forEach>
                        </ul>
                    </div>
                </div>
                <p class="fr crumbTitle j_ResultsNumber">共<span> ${numFound}</span>件相关商品</p>
            </div>
        </div>
        <!-- E bread crumb -->
        <%--<div class="search-filter-current"></div>--%>
        <!-- S attributes -->
        <c:if test="${groupedProps!= null}">
            <div class="attrs">
                <%-- 统一左侧显示
                <!-- S category -->
                <c:if test="${empty param.cat and not empty pCats}">
                    <div class="brand-attr">
                        <div class="attr cf">
                            <div class="attr-key">分类</div>
                            <div class="attr-values">
                                <ul class="av-collapse cf" data-atp="{loc},{brand},,,{f},4,{c},">
                                    <c:forEach var="val" items="${pCats}">
                                        <c:set var="val" value="${val.value}" />
                                        <li><decode href="${fnx:rep(paramValues, 'cat', val.key)}" title="${val.name}">${val.name}</decode></li>
                                    </c:forEach>
                                </ul>
                            </div>
                        </div>
                    </div>
                </c:if>
                <!-- E category -->
                --%>
                <!-- S brand -->
                <c:if test="${empty param.brand and not empty groupedProps.brand}">
                    <div class="brand-attr">
                        <div class="attr cf">
                            <div class="attr-key">品牌</div>
                            <div class="attr-values">
                                <ul class="av-collapse cf" data-atp="{loc},{brand},,,{f},4,{c},">
                                    <c:forEach var="val" items="${groupedProps.brand.values}">
                                        <li><a href="${fnx:rep(paramValues, 'brand', val.key)}" title="${val.name}">${val.name}</a></li>
                                    </c:forEach>
                                </ul>
                            </div>
                        </div>
                    </div>
                </c:if>
                <!-- E brand -->
                <!-- S props -->
                <div class="props">
                    <%-- 擦这里, 会始终按照 map.entrySet 调用, iterable 接口无效, getter 无效 --%>
                    <c:forEach var="entry" items="${groupedProps}">
                        <c:set var="prop" value="${entry.value}"/>
                        <%--Hide facets without value--%>
                        <c:if test="${'cat' != prop.key and 'brand' != prop.key and fn:length(prop.values) > 1}">
                            <div class="attr cf" data-id="${prop.key}">
                                <div class="attr-key">${prop.name}</div>
                                <div class="attr-values">
                                    <ul class="av-collapse cf">
                                        <c:forEach var="value" items="${prop.values}">
                                            <li data-id="${value.key}">
                                                <c:set var="key" value="${prop.key}:${value.key}"/>
                                                <a href="${fnx:ap(paramValues, 'prop', key)}">${value.name}</a>
                                            </li>
                                        </c:forEach>
                                    </ul>
                                </div>
                            </div>
                        </c:if>
                    </c:forEach>
                </div>
                <!-- E props -->
            </div>
        </c:if>
        <!-- E attributes -->
        <c:if test="${1 > fn:length(results)}">
            <p class="nrt">
                 额~没找到与“ ${param.q} ”相关的 商品，可能您搜索的商品太高级了, 要不您换个关键词我帮您再找找看
            </p>
        </c:if>
        <c:if test="${0 < fn:length(results)}">
            <%@include file="/include/sortbar.jspf"%>
            <div class="deal-list cf">
                <c:forEach var="doc" items="${results}">
                    <div class="deal-tile" data-id="${doc.id}">
                        <div class="deal-tile__img-wrap">
                            <a href="${ctx}/demo?path=sku&item&id=${doc.id}" target="_blank" class="deal-tile__img">
                                <img src="http://121.41.51.216/${doc.image}_210x210.jpg" alt="" onerror="this.src='${ctx}/img/blank.gif'" >
                            </a>
                        </div>
                        <div class="deal-tile__title text-ellipsis">
                            <a href="#" title="${doc.title}">${doc.title}<strong></strong></a>
                        </div>
                    <span class="price">
                        <strong><b>¥</b> ${doc.price}</strong>
                        <del style="font-size: 0.8em; color: gray;">￥${doc.marketPrice}</del>
                    </span>
                    </div>
                </c:forEach>
            </div>
        </c:if>
    </div>
</div>
<%@include file="/include/ft.jspf"%>
<%@ include file="/elevator.jspf"%>
<script type="text/javascript" src="${ctx}/js/private/common.js"></script>
</body>
</html>

